<template>
  <div>
    <a-modal
      :title="$t('all.autotext59')"
      width="500px"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        :model="form"
        :rules="formRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="formRef"
      >
        <a-form-model-item :label="$t('all.autotext1357')" prop="ptsNo">
          <a-input v-model="form.ptsNo" :placeholder="$t('all.autotext282')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext545')" prop="ptsStatus">
          <a-select v-model="form.ptsTypeRoleId" allowClear >
            <a-select-option v-for="item in typelist" :key="item.id" :value="item.id"> {{ item.name }} </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext1466')" prop="ptsStatus">
          <a-select v-model="form.ptsStatus" allowClear >
            <a-select-option v-for="(item, index) in $const.RELATION_STATUS" :key="index" :value="item.value">{{ item.desc }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext1095')" prop="ptsName">
          <a-input v-model="form.ptsName" :disabled="hasEdit" :placeholder="$t('all.autotext282')" />
        </a-form-model-item>
        <a-form-model-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext192')" prop="evidenceType">
          <a-select
            v-model="form.evidenceType"
            :disabled="hasEdit"
            allowClear
            @change="evidenceChange"
          >
            <a-select-option v-for="(item, index) in $const.DOCUMENT_TYPE" :key="index" :value="item.value">{{ item.desc }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          v-if="$options.filters.isPtsVisible()"
          :label="$t('all.autotext1359')"
          prop="ptsIdentity"
          :rules="isRule"
        >
          <a-input v-model="form.ptsIdentity" :disabled="hasEdit" :placeholder="$t('all.autotext1204')" />
        </a-form-model-item>
        <a-form-model-item
          :label="$t('all.autotext1104')"
          prop="sex"
          v-if="$options.filters.isPtsVisible() && form.evidenceType!==1"
        >
          <a-select v-model="form.sex" allowClear>
            <a-select-option v-for="(item, index) in $const.GENDER_TYPE" :key="index" :value="item.value">{{ item.desc }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          v-if="$options.filters.isPtsVisible() && form.evidenceType!==1"
          :label="$t('all.autotext739')"
          prop="year"
        >
          <a-input v-model="form.year" :placeholder="$t('all.autotext422')" />
        </a-form-model-item>
        <a-form-model-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext1714')" prop="ptsPhone">
          <a-input v-model="form.ptsPhone" :disabled="hasEdit" :placeholder="$t('all.autotext393')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext421')" prop="researchDetailId">
          <a-select v-model="form.researchDetailId" allowClear >
            <a-select-option v-for="item in theDoctorList" :value="item.id" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import cloneDeep from 'lodash.clonedeep'
import { editPts, ptsTypes } from '@/api/overview/subject'
export default {
  props: ['proId', 'uId', 'visible', 'info', 'theDoctorList'],
  data () {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      typelist: [],
      form: {
        ptsNo: '',
        ptsTypeRoleId: '',
        ptsName: '',
        evidenceType: '',
        ptsIdentity: '',
        sex: '',
        year: '',
        ptsPhone: '',
        ptsStatus: '',
        researchDetailId: ''
      },
      formRules: {
        ptsNo: [{ required: true, message: this.$t('all.autotext57'), trigger: 'blur' }],
        ptsName: [{ required: true, message: this.$t('all.autotext479'), trigger: 'blur' }],
        ptsTypeRoleId: [{ required: true, message: this.$t('all.autotext142'), trigger: 'change' }],
        evidenceType: [{ required: true, message: this.$t('all.autotext326'), trigger: 'change' }],
        ptsIdentity: [
          { required: true, message: this.$t('all.autotext1204'), trigger: 'blur' },
          { pattern: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/, message: this.$t('all.autotext1052') }
        ],
        ptsIdentityOther: [
          { required: true, message: this.$t('all.autotext1204'), trigger: 'blur' }
        ],
        sex: [{ required: true, message: this.$t('all.autotext954'), trigger: 'change' }],
        year: [{ required: true, message: this.$t('all.autotext64'), trigger: 'blur' }],
        ptsPhone: [
          { required: true, message: this.$t('all.autotext396'), trigger: 'blur' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: this.$t('all.autotext140') }
        ],
        ptsStatus: [{ required: true, message: this.$t('all.autotext356'), trigger: 'change' }]
      }
    }
  },
  computed: {
    isRule () {
      return this.form.evidenceType === 1 ? this.formRules.ptsIdentity : this.formRules.ptsIdentityOther
    },
    hasEdit () {
      return this.info.authStatus === 1
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.form.ptsNo = this.info.ptsNo
        this.form.ptsTypeRoleId = this.info.ptsTypeRoleId
        this.form.ptsStatus = this.info.ptsStatus
        this.form.ptsName = this.info.ptsName
        this.form.evidenceType = this.info.evidenceType
        this.form.ptsIdentity = this.info.ptsIdentity
        this.form.sex = this.info.ptsGender
        this.form.year = this.info.year
        this.form.ptsPhone = this.info.ptsPhone
        this.form.researchDetailId = this.info.researchDetailId
      }
    }
  },
  mounted () {
    this.getPtsTypes()
  },
  methods: {
    evidenceChange (e) {
      this.$refs.formRef.clearValidate('ptsIdentity')
    },
    async getPtsTypes () {
      const res = await ptsTypes({ proId: this.proId })
      this.typelist = res
    },
    handleOk () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.handleEditPts()
        }
      })
    },
    handleCancel () {
      this.$refs.formRef.resetFields()
      this.$emit('update:visible', false)
    },
    async handleEditPts () {
      let key = Object.keys(this.$const.RELATION_STATUS).find(item => this.$const.RELATION_STATUS[item].value === this.form.ptsStatus)
      let info = cloneDeep(this.info)
      info.ptsTypeRoleIdDesc = this.typelist.find(item => item.id === info.ptsTypeRoleId).name
      await editPts({
        id: this.uId,
        ...this.form,
        ptsStatusDesc: this.$const.RELATION_STATUS[key].desc,
        ptsTypeRoleIdDesc: this.typelist.find(item => item.id === this.form.ptsTypeRoleId).name,
        authStatus: this.info.authStatus,
        userAuthorizeId: this.info.userAuthorizeId,
        beforeData: JSON.stringify(info)
      })
      this.$emit('update:visible', false)
      this.$emit('handleOk')
    }
  }
}
</script>
